<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Bar Graph</title>

  <style type="text/css" id="demo-css">
    BODY, HTML
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }
  </style>

  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="../../src/basis/ui/graph.js"></script>

  <script type="text/javascript" src="../seedrandom.js"></script>
  <script type="text/javascript" src="../demo.js"></script>

  <!--[if lt IE 9]>
  <script type="text/javascript" src="../../src/basis/ext/flashcanvas.js"></script>
  <![endif]-->

</head>

<body>
  <h1>Basis Demos: Bar Graph</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">

    var DOM = basis.dom;
    var nsEntity = basis.entity;
    var BarGraph = basis.ui.graph.BarGraph;
    var StackedBarGraph = basis.ui.graph.StackedBarGraph;


    //
    // Example
    //

    var countries = ['Russia', 'United States', 'China', 'UK', 'Germany']

    var data = [];
    var lastValue;
    var value;

    Math.seedrandom("bar graph");

    var min = 10000;
    var max = 50000;
    for (var i = 0, countries; country = countries[i]; i++)
    {
      var row = {
        Country: country
      }
      
      lastValue = (max - min) * Math.random() + min; // 10 000 - 50 000
      for (var year = 2010; year <= 2012; year++)
      {
        lastValue = row[year] = lastValue + 0.2 * lastValue * (2 * Math.random() - 1); // +/- 20% from last value;
      }

      data.push(row);
    }

    var barGraphConfig = {
      container: DOM.get('demo-container'),
      width: 500,
      height: 450,

      keyGetter: Function.getter('data.Country'),
      childNodes: basis.data(data),
      series: {
        childNodes: [
          {
            legend: '2010',
            valueGetter: Function.getter('data[2010]')
          },
          {
            legend: '2011',
            valueGetter: Function.getter('data[2011]')
          },
          {
            legend: '2012',
            valueGetter: Function.getter('data[2012]')
          }
        ]
      }
    }

    new BarGraph(barGraphConfig);

    new BarGraph(Object.extend({
      invertAxis: true
    }, barGraphConfig));

    new StackedBarGraph(barGraphConfig);

    new StackedBarGraph(Object.extend({
      invertAxis: true
    }, barGraphConfig));

  </script>
</body>

</html>